<template>
	<div class="page bg-white">
		<el-row>
			<el-button v-if="hasPermission('dlyrl:oa:unitassets:unitAssets:add')" type="primary" size="small"
				icon="el-icon-plus" @click="add()">新建</el-button>
		</el-row>
		<el-table :data="dataList" isBigData isTreeTable size="medium" v-loading="loading" row-key="id"
			class="table treetable" :cell-style="cellStyle" style="border:1px solid #d6cfe2;"
			:header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName">
			<el-table-column prop="name" show-overflow-tooltip label="名称">
			</el-table-column>
			<el-table-column prop="remarks" show-overflow-tooltip label="备注信息">
			</el-table-column>
			<el-table-column header-align="center" align="center" fixed="right" :key="Math.random()" width="300"
				label="操作">
				<template slot-scope="scope">
					<el-button v-if="hasPermission('dlyrl:oa:unitassets:unitAssets:view')" type="text" size="mini"
						icon="el-icon-view" @click="view(scope.row.id)">查看</el-button>
					<el-button v-if="hasPermission('dlyrl:oa:unitassets:unitAssets:edit')" type="text" size="mini"
						icon="el-icon-edit" @click="edit(scope.row.id)">修改</el-button>
					<el-button v-if="hasPermission('dlyrl:oa:unitassets:unitAssets:del')" type="text" size="mini"
						icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
					<el-button v-if="hasPermission('dlyrl:oa:unitassets:unitAssets:add')" type="text" size="mini"
						icon="el-icon-circle-plus-outline" @click="addChild(scope.row.id, scope.row.name)">添加下级
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 弹窗, 新增 / 修改 -->
		<UnitAssetsForm ref="unitAssetsForm" @refreshDataList="refreshList"></UnitAssetsForm>
	</div>
</template>

<script>
	import tableStyles from '../../../../../utils/mixins.js'
	import UnitAssetsForm from './UnitAssetsForm'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				dataList: [],
				loading: false
			}
		},
		components: {
			UnitAssetsForm
		},
		activated() {
			this.refreshList()
		},

		methods: {
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/dlyrl/oa/unitassets/unitAssets/treeData',
					method: 'get'
				}).then(({
					data
				}) => {
					this.dataList = data.treeData
					this.loading = false
				})
			},
			// 新增下级
			addChild(id, name) {
				this.$refs.unitAssetsForm.init('addChild', {
					id: '',
					parent: {
						id: id,
						name: name
					}
				})
			},
			// 新增
			add() {
				this.$refs.unitAssetsForm.init('add', {
					id: '',
					parent: {
						id: '',
						name: ''
					}
				})
			},
			// 修改
			edit(id) {
				this.$refs.unitAssetsForm.init('edit', {
					id: id,
					parent: {
						id: '',
						name: ''
					}
				})
			},
			// 查看
			view(id) {
				this.$refs.unitAssetsForm.init('view', {
					id: id,
					parent: {
						id: '',
						name: ''
					}
				})
			},
			// 删除
			del(id) {
				this.$confirm(`确定删除所选项吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http({
						url: '/dlyrl/oa/unitassets/unitAssets/delete',
						method: 'delete',
						params: {
							'id': id
						}
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
						this.loading = false
					})
				})
			}
		}
	}
</script>
